body{
	background-color: rgb(245, 245, 249);
}

.header{	/* header 头部 */
	width: 100%;
	height: 8.533333rem;
	background-color: rgb(63, 69, 79);
	overflow: hidden;
}

p{
	font-size: 0.8rem;
}

.h_top{
	display: flex;
	justify-content: space-between;
	padding: 0 1.173333rem;
	font-size: 0.746666rem;
	color: #fff;
	margin-top: 0.666666rem;
}

.h_top i{
	color: #fff;
	font-size: 0.746666rem;
}

.h_bottom{
	margin-top: 1.333333rem;
	display: flex;
	justify-content: space-between;
	padding: 0 2rem;
	text-align: center;
	color: #fff;
}

.h_bottom li{
	position: relative;
}

.h_bottom i{
	display: block;
	font-size: 1.733333rem;
	color: #fff;
	margin-bottom: 0.586666rem;
}

.h_bottom li:last-of-type i{
	display: block;
	width: 1.986666rem;
	height: 1.986666rem;
	border-radius: 50%;
	background-color: #fff;
}

.m_top {	/* main 主体 */
	display: flex;
	flex-direction: column;
}

.m_top li{
	display: flex;
	background-color: #fff;
}

.m_top a{
	width: 25%;
	height: 4.853333rem;
	text-align: center;
	border-left: 0.026666rem solid #CCCCCC;
	border-top: 0.026666rem solid #CCCCCC;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.m_top i{
	font-size: 1.333333rem;
	margin-bottom: 0.48rem;
}

/* 改颜色部分 */
.m_top li:first-of-type a:first-of-type i,
.m_top li:first-of-type a:last-of-type i,
.m_top li:last-of-type a:first-of-type i,
.m_top li:last-of-type a:last-of-type i{
	color: rgb(48, 180, 232);
}

.m_top li:first-of-type a:nth-of-type(2) i,
.m_top li:first-of-type a:nth-of-type(3) i,
.m_top li:last-of-type a:nth-of-type(2) i,
.m_top li:last-of-type a:nth-of-type(3) i,
.m_top li:nth-of-type(2) a:last-of-type i
{
	color: rgb(249, 98, 104);
}

.m_top li:nth-of-type(2) a:first-of-type i,
.m_top li:nth-of-type(2) a:nth-of-type(3) i{
	color: rgb(255, 179, 89);
}

.m_top li:nth-of-type(2) a:nth-of-type(2) i{
	color:rgb(54, 188, 153) ;
}

.m_center {
	width: 100%;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	margin: 0.666666rem 0;
	padding: 0 1.066666rem;
}

.m_center li:last-of-type{
	align-self: center;
}

.m_center p:first-of-type{
	font-size: 1.12rem;
	font-weight: bold;
}

.m_center span{
	color: rgb(250, 108, 118);
	font-weight: normal;
}

.m_center p:last-of-type{
	font-size: 0.693333rem;
	text-align: right;
	color: #CCCCCC;
}

.f_con {	/* footer 页脚 */
	width: 100%;
	height: 2.693333rem;
	display: flex;
	text-align: center;
	justify-content: space-between;
	margin-top: 0.666666rem;
	padding: 0 1.6rem;
	border-top: 1px solid #CCCCCC;
	background-color: #fff;
	
}

.f_con li{
	align-self: center;
}

.f_con i{
	font-size: 1.226666rem;
}

.f_con p{
	font-size: 0.533333rem;
}

.f_con li:first-of-type{
	color: #0000FF;
}

.f_con li{
	position: relative;
}

.p{
	padding: 10px;
	border-radius: 50%;
	background-color: red;
	position: absolute;
	top: 0;
	right: 0;
}

.pp{
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	border-radius: 50%;
	background-color: red;
	position: absolute;
	top: 0;
	right: -18px;
	color: #fff;
	font-size: 17px;
}